<template>
  <div class="idShop_apply_enterprise">
    <c-title :hide="false" text="企业认证"></c-title>
    <template v-if="(applyStatus == 1 || applyStatus == 0) && image_url_status">
      <!-- 认证状态 -->
      <div class="applyAudit">
        <img :src="image_url_status" alt="" />
        <div class="applyAuditTxt">{{ applyStatus == 1 ? "企业认证通过" : "企业认证待审核" }}</div>
      </div>
    </template>
    <template v-else>
      <div class="applyBox">
        <div class="uploadBox">
          <div class="left"><span>*</span>上传营业执照</div>
          <div class="right">
            <van-uploader :after-read="onRead">
              <div class="imgBox">
                <img v-if="imageUrl" :src="imageUrl" alt="" />
                <i class="iconfont icon-icon_add" v-else></i>
              </div>
            </van-uploader>
          </div>
        </div>
        <div class="uploadBox">
          <div class="left"><span>*</span>上传授权使用书</div>
          <div class="right">
            <van-uploader :after-read="onRead2">
              <div class="imgBox">
                <img v-if="imageUrl2" :src="imageUrl2" alt="" />
                <i class="iconfont icon-icon_add" v-else></i>
              </div>
            </van-uploader>
          </div>
        </div>
        <div class="uploadBox">
          <div class="left"><span>*</span>授权管理者手机号</div>
          <div class="right">
            <van-field v-model="mobile" placeholder="请输入" />
          </div>
        </div>
        <div class="uploadBox">
          <div class="left"><span>*</span>管理者身份证号</div>
          <div class="right">
            <van-field v-model="idCard" placeholder="请输入" />
          </div>
        </div>
      </div>
      <div class="submitBtn" @click="applySubmit">提交</div>
    </template>
    <div class="recordBtn" @click="toRecord">认证记录</div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      imageUrl: "",
      imageUrl2: "",
      idCard: "",
      mobile: "",
      license_pic_file_name: "",
      license_pic: "",
      applyStatus: "",
      image_url_status: "",
      auth_contract: "",
      auth_contract_file_name: ""
    };
  },
  activated() {
    this.getData();
  },
  methods: {
    async getData() {
      let { data, msg, result } = await $http.get("plugin.project-party.frontend.controllers.apply.companyApplyCheck", {}, "");
      if (result) {
        this.applyStatus = data.status;
        this.image_url_status = data.image_url;
      } else {
        this.applyStatus = 2;
      }
      console.log(this.applyStatus);
    },
    applySubmit() {
      let json = {
        form: {
          license_pic_file_name: this.license_pic_file_name,
          license_pic: this.license_pic,
          auth_contract: this.auth_contract,
          auth_contract_file_name: this.auth_contract_file_name,
          manager_tel: this.mobile,
          manager_code: this.idCard
        }
      };
      $http
        .post("plugin.project-party.frontend.controllers.apply.companyApply", json, "")
        .then(res => {
          if (res.result == 1) {
            this.getData();
          } else {
            this.$toast(res.msg);
          }
        })
        .catch(error => {
          console.log(error);
        });
    },
    toRecord() {
      this.$router.push(this.fun.getUrl("idShop_apply_enterprise_record"));
    },
    /*vant图片上传*/
    onRead(e) {
      let fd = new FormData();
      fd.append("file", e.file); // 第一个参数字符串可以填任意命名，第二个根据对象属性来找到file
      var That = this;
      this.uploadUrl = this.fun.getRealUrl("upload.uploadPic", {});
      axios
        .post(this.uploadUrl, fd, {
          headers: { "Content-Type": "multipart/form-data" }
        })
        .then(response => {
          var responseData = response.data;
          if (responseData.result == 1) {
            That.imageUrl = URL.createObjectURL(e.file);
            this.license_pic = responseData.data.img_url;
            this.license_pic_file_name = responseData.data.img;
          } else {
            Toast(responseData.msg);
          }
        })
        .catch(error => {
          console.log(error);
        });
    },
    /*vant图片上传*/
    onRead2(e) {
      let fd = new FormData();
      fd.append("file", e.file); // 第一个参数字符串可以填任意命名，第二个根据对象属性来找到file
      var That = this;
      this.uploadUrl = this.fun.getRealUrl("upload.uploadPic", {});
      axios
        .post(this.uploadUrl, fd, {
          headers: { "Content-Type": "multipart/form-data" }
        })
        .then(response => {
          var responseData = response.data;
          if (responseData.result == 1) {
            That.imageUrl2 = URL.createObjectURL(e.file);
            this.auth_contract = responseData.data.img_url;
            this.auth_contract_file_name = responseData.data.img;
          } else {
            Toast(responseData.msg);
          }
          // this.img.push(res.data.imgpath)
        })
        .catch(error => {
          console.log(error);
        });
    }
  }
};
</script>
<style lang="scss" scoped>
.applyAudit {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-top: 2.47rem;
  padding-bottom: 4.28rem;
  background: #ffffff;
  img {
    width: 6.66rem;
    height: 6.66rem;
  }
  .applyAuditTxt {
    font-size: 0.88rem;
    margin-top: 0.81rem;
    text-align: center;
  }
}
.submitBtn {
  position: fixed;
  bottom: 1.96rem;
  width: 21.94rem;
  height: 2.5rem;
  margin: 0 0.75rem;
  background: #f15353;
  border-radius: 1.25rem;
  color: #ffffff;
  font-weight: 500;
  font-size: 0.94rem;
  line-height: 2.5rem;
}
.recordBtn {
  width: 3rem;
  height: 3rem;
  background: rgba(0, 0, 0, 0.7);
  position: fixed;
  bottom: 7.5rem;
  right: 0.75rem;
  border-radius: 50%;
  color: #ffffff;
  font-size: 0.81rem;
  padding: 0 0.325rem;
  display: flex;
  align-items: center;
}
.applyBox {
  margin: 0.63rem 0.75rem;
  border-radius: 0.5rem;
  background: #ffffff;
  padding-bottom: 5rem;
  .uploadBox::after {
    position: absolute;
    content: "";
    left: 0.41rem;
    bottom: 0;
    width: 100%;
    height: 1px;
    background: #f0f0f1;
  }
  .uploadBox {
    padding: 1.25rem 0.34rem;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    position: relative;
    overflow: hidden;
    margin-right: 0.44rem;
    .left {
      width: 6rem;
      flex-shrink: 0;
      margin-right: 1.03rem;
      overflow: hidden;
      font-size: 0.88rem;
      text-align: left;
    }
    .right {
      flex: 1;
      text-align: left;
      .van-cell {
        padding: 0;
      }
      .imgBox {
        width: 6.19rem;
        height: 6.19rem;
        border: 1px dashed #c0ccda;
        margin: 0 auto;
        display: flex;
        border-radius: 0.5rem;
        justify-content: center;
        align-items: center;
        img {
          width: 100%;
          height: auto;
        }
        .icon-icon_add {
          color: #aaaab3;
          font-size: 2rem;
        }
      }
    }
  }
}
.applyBox .uploadBox:last-child::after {
  background: transparent;
}
</style>
